{% from 'bootstrap/nav.html' import render_nav_item %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% block head %}
        <title>{% block title %}{% endblock %} - Albumy</title>
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
        {% block styles %}
            <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}">
            <link rel="stylesheet" href="{{ url_for('static', filename='open-iconic/font/css/open-iconic-bootstrap.css') }}">
            <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        {% endblock styles %}
    {% endblock head %}
</head>

<body>
{% block navbar %}
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('main.index') }}">
                <img src="{{ url_for('static', filename='favicon.ico') }}" alt="Albumy">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01"
                    aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarColor01">
                <div class="navbar-nav mr-auto">
                    {{ render_nav_item('main.index', 'Home') }}
                    {{ render_nav_item('main.explore', 'Explore') }}
                    <form class="form-inline my-2 my-lg-0" action="{{ url_for('main.search') }}">
                        <input type="text" name="q" class="form-control mr-sm-1" placeholder="Photo, tag or user"
                               required>
                        <button class="btn btn-light my-2 my-sm-0" type="submit">
                            <span class="oi oi-magnifying-glass"></span>
                        </button>
                    </form>
                </div>
                <div class="navbar-nav ml-auto">
                {% if current_user.is_authenticated %}
                    <a class="nav-item nav-link" href="{{ url_for('main.show_notifications', filter='unread') }}">
                        <span class="oi oi-bell"></span>
                        <span id="notification-badge"
                              class="{% if notification_count == 0 %}hide{% endif %} badge badge-danger badge-notification"
                              data-href="{{ url_for('ajax.notifications_count') }}">{{ notification_count }}</span>
                    </a>
                    <a class="nav-item nav-link" href="{{ url_for('main.upload') }}" title="Upload">
                        <span class="oi oi-cloud-upload"></span>&nbsp;&nbsp;
                    </a>
                    <div class="dropdown nav-item">
                        <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button"
                           aria-expanded="false">
                            <img class="avatar-xs"
                                 src="{{ url_for('main.get_avatar', filename=current_user.avatar_s) }}">
                            <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" role="menu">
                            <h6 class="dropdown-header">Logged in as {{ current_user.username }}</h6>
                            <a class="dropdown-item" href="{{ url_for('user.index', username=current_user.username) }}">
                                <span class="oi oi-person"></span> My Home
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="{{ url_for('user.edit_profile') }}">
                                <span class="oi oi-cog"></span> Settings
                            </a>
                            {% if current_user.can('MODERATE') %}
                                <a class="dropdown-item" href="{{ url_for('admin.index') }}">
                                    <span class="oi oi-dashboard"></span> Dashboard
                                </a>
                            {% endif %}
                            <a class="dropdown-item" href="{{ url_for('auth.logout') }}">
                                <span class="oi oi-power-standby"></span> Logout
                            </a>
                        </div>
                    </div>
                {% else %}
                    <a class="btn btn-outline-primary" href="{{ url_for('auth.login') }}">Login</a>&nbsp;&nbsp;
                    <a class="btn btn-primary" href="{{ url_for('auth.register') }}">Join Albumy</a>
                {% endif %}
                </div>
            </div>
        </div>
    </nav>
{% endblock %}

<main>
    <div class="container">
        {% for message in get_flashed_messages(with_categories=True) %}
            <div class="alert alert-{{ message[0] }}">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ message[1] }}
            </div>
        {% endfor %}
        {% block content %}{% endblock %}
        {% block footer %}
            <footer>
                <p class="float-left">
                    <small>&copy; 2018
                        <a href="http://greyli.com" title="Written by Grey Li">Grey Li</a> -
                        <a href="https://github.com/greyli/albumy" title="Fork me on GitHub">GitHub</a> -
                        <a href="http://helloflask.com" title="A HelloFlask project">HelloFlask</a>
                    </small>
                </p>
                <p class="float-right">
                    <small>Capture and share every wonderful moment.</small>
                </p>
            </footer>
        {% endblock %}
    </div>
</main>
<div id="toast"></div>

{% block scripts %}
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    <script type="text/javascript">
        var csrf_token = "{{ csrf_token() }}";
        {% if current_user.is_authenticated %}
            var is_authenticated = true;
        {% else %}
            var is_authenticated = false;
        {% endif %}
    </script>
{% endblock %}
</body>
</html>